<template>
	<view>
		<view class="bd-item dir-left-nowrap" :class="{'bd-item-border': index !== list.length - 1}"
			v-for="(item, index) in list" :key="index" @click="route_go(item)">
			<view class="pt-shop-item" v-if="item.isab == 0">
				<view class="pt-title" v-if="item.goodsList.pintuanGoods.title != null">
					{{item.goodsList.pintuanGoods.title}}
				</view>
				<view class="pt-goods">
					<view class="pt-goods-item" v-for="(items,indexs) in 2" :key="indexs" v-if="indexs < 2">
						<!-- <image class="image" :src="item.cover_pic"></image>
						<view class="no-goods" v-if="item.goods_stock == 0">
							<view class="no-title">
								已团
							</view>
						</view> -->
						<view class="ptimage">
							<image class="image" :src="item.cover_pic"></image>
							<view class="no-goods" v-if="item.goodsList.groups[0].attr[0].stock == 1 && indexs < 1">
								<view class="no-title">
									已团
								</view>
							</view>
							<view class="no-goods" v-if="item.goodsList.groups[0].attr[0].stock == 0 && indexs < 2">
								<view class="no-title">
									已团
								</view>
							</view>
						</view>
					</view>
				</view>
				<view>
					<view class="bd-name u-line-2">{{item.name}}</view>
					<!-- <view class="app-group" :class="themeObject.color">已团{{item.sales}}件</view> -->
				</view>
				<view class="price dir-top-nowrap main-right">
					<!-- <view class="member-price" v-if="item.is_level === 1 && item.level_price != -1">
						<app-member-price :price="item.level_price"></app-member-price>
					</view> -->
					<!-- <view v-if="item.vip_card_appoint.discount" class="sup-vip">
						<app-sup-vip :is_vip_card_user="item.vip_card_appoint.is_vip_card_user"
							:discount="item.vip_card_appoint.discount"></app-sup-vip>
					</view> -->
					<view class="app-price dir-left-nowrap cross-bottom">
						<text class="app-now-price">定金：</text>
						<text class="app-symbol app-now-price" :class="themeObject.color"
							v-if="item.price > 0">{{item.price}}</text>
						<text class="app-now-price" :class="themeObject.color" v-else>免费</text>
						<!-- <text class="app-origin-price">全款：</text>
						<text class="app-symbol app-origin-price">{{item.original_price}}</text> -->
					</view>
				</view>
				<view class="pt-goods-desc line2" v-if="item.subtitle != ''">
					{{item.subtitle}}
				</view>
				<!-- <view class="pt-goods-desc line2">
					<view v-if="item.goods_stock > 0" class="app-button"
						:class="themeObject.theme === 'a' ? 'default-button' : themeObject.back">去开团</view>
					<view v-else style="background: #DCDCDC;color: #fff" class="app-button">已售罄</view>
				</view> -->
				<view class="pt-goods-desc line2">
					<view v-if="item.goodsList.groups[0].attr[0].stock == 2" class="app-button"
						:class="themeObject.theme === 'a' ? 'default-button' : themeObject.back">去开团
					</view>
					<view v-else-if="item.goodsList.groups[0].attr[0].stock == 1" class="app-button"
						:class="themeObject.theme === 'a' ? 'default-button' : themeObject.back">去拼团
					</view>
					<view v-else-if="item.goodsList.groups[0].attr[0].stock == 0"
						style="background: #DCDCDC;color: #fff" class="app-button">
						已售罄</view>
					<view v-else style="background: #DCDCDC;color: #fff" class="app-button">已售罄</view>
				</view>
			</view>
			<!-- <view class="dir-left-nowrap" v-if="item.isab == 0">
				<view class="out-dialog" v-if="item.goods_stock === 0 && appSetting.is_show_stock === 1">
					<image :src="appSetting.is_use_stock == 1 ? appImg.plugins_out : appSetting.sell_out_pic"></image>
				</view>
				<image class="bd-image" :src="item.cover_pic"></image>
				<view class="bd-content dir-top-nowrap main-between cross-top">
					<view>
						<view class="bd-name u-line-2">{{item.name}}</view>
						<view class="app-group" :class="themeObject.color">已团{{item.sales}}件</view>
					</view>
					<view class="app-price-button dir-left-nowrap main-between cross-bottom">
						<view class="price dir-top-nowrap main-right">
							<view class="member-price" v-if="item.is_level === 1 && item.level_price != -1">
								<app-member-price :price="item.level_price"></app-member-price>
							</view>
							<view v-if="item.vip_card_appoint.discount" class="sup-vip">
								<app-sup-vip :is_vip_card_user="item.vip_card_appoint.is_vip_card_user"
									:discount="item.vip_card_appoint.discount"></app-sup-vip>
							</view>
							<view class="app-price dir-left-nowrap cross-bottom">
								<text class="app-symbol app-now-price" :class="themeObject.color"
									v-if="item.price > 0">{{item.price}}</text>
								<text class="app-now-price" :class="themeObject.color" v-else>免费</text>
								<text class="app-symbol app-old-price">{{item.original_price}}</text>
							</view>
						</view>
						<view v-if="item.goods_stock > 0" class="app-button"
							:class="themeObject.theme === 'a' ? 'default-button' : themeObject.back">去开团</view>
						<view v-else style="background: #DCDCDC;color: #fff" class="app-button">已售罄</view>
					</view>
				</view>
			</view> -->
			<view class="pt-shop-item" v-if="item.isab == 1">
				<view class="pt-title" v-if="item.goodsList.pintuanGoods.title != null">
					{{item.goodsList.pintuanGoods.title}}
				</view>
				<view class="pt-goods">
					<view class="pt-goods-item" v-for="(items,indexs) in item.goodsList.groups[0].attr" :key="indexs"
						v-if="indexs < 2">
						<view class="ptimage">
							<image class="image" :src="items.pic_url || item.cover_pic"></image>
							<view class="no-goods" v-if="items.stock == 0">
								<view class="no-title">
									已团
								</view>
							</view>
						</view>
						<view class="name u-line-1">{{items.attr_list[0].attr_name}}</view>
						<view class="price u-line-1">定金￥{{items.price}}</view>
					</view>
				</view>
				<!-- 10.28 注释 -->
				<!-- <view class="pt-goods-desc line2">
					AB拼团
				</view> -->
				<view class="pt-goods-desc line2">
					<view
						v-if="item.goodsList.groups[0].attr[0].stock > 0 && item.goodsList.groups[0].attr[1].stock > 0 && item.goodsList.groups[0].attr[1].stock > 0"
						class="app-button" :class="themeObject.theme === 'a' ? 'default-button' : themeObject.back">去开团
					</view>
					<view
						v-else-if="item.goodsList.groups[0].attr[0].stock > 0 || item.goodsList.groups[0].attr[1].stock > 0"
						class="app-button" :class="themeObject.theme === 'a' ? 'default-button' : themeObject.back">去拼团
					</view>
					<view
						v-else-if="item.goodsList.groups[0].attr[0].stock == 0 || item.goodsList.groups[0].attr[1].stock == 0 && item.goodsList.groups[0].attr[1].stock == 0"
						style="background: #DCDCDC;color: #fff" class="app-button">已售罄</view>
					<view v-else style="background: #DCDCDC;color: #fff" class="app-button">已售罄</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';

	export default {
		name: 'app-product-list',
		computed: {
			...mapState({
				appSetting: state => state.mallConfig.mall.setting,
				appImg: state => state.mallConfig.__wxapp_img.mall
			}),
			// #ifndef MP-BAIDU
			...mapGetters('mallConfig', {
				getVideo: 'getVideo'
			}),
			// #endif
		},
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			themeObject: Object
		},

		methods: {
			route_go(item) {
				uni.navigateTo({
					url: `/plugins/pt/goods/goods?goods_id=${item.id}`,
				});
				return
				// 816加是否AB拼
				if (item.isab == 0) {
					uni.navigateTo({
						url: `/plugins/pt/abgoods/abgoods?goods_id=${item.id}`
					})
				} else if (item.isab == 1) {
					uni.navigateTo({
						url: `/plugins/pt/goods/goods?goods_id=${item.id}`
					})
				}
				/* if (data.video_url && this.getVideo == 1) {
					uni.navigateTo({
						url: `/pages/goods/video?goods_id=${data.id}&sign=pintuan`
					});
				} else {
					uni.navigateTo({
						url: `/plugins/pt/goods/goods?goods_id=${data.id}`,
					});
				} */
			}
		}
	}
</script>

<style scoped lang="scss">
	.bd-item-border {
		border-bottom: #{1rpx} solid #e2e2e2;
	}

	.out-dialog {
		width: #{220rpx};
		height: #{220rpx};
		position: absolute;
		z-index: 10;
		background-color: rgba(0, 0, 0, .5);

		image {
			width: #{220rpx};
			height: #{220rpx};
		}
	}

	.bd-image {
		width: #{220rpx};
		height: #{220rpx};
		border-radius: #{4rpx};
	}

	.bd-name {
		font-size: #{28rpx};
		color: #353535;
		margin-top: #{5rpx};
	}

	.bd-item {
		padding: #{24rpx 24rpx 14rpx 24rpx};
		background-color: #ffffff;
		position: relative;

		.bd-content {
			width: #{458rpx};
			margin-left: #{24rpx};
			position: relative;

			.app-group {
				font-size: #{22rpx};
				margin-bottom: 5upx;
				margin-top: -3upx;
			}

			.app-price-button {
				position: absolute;
				bottom: #{10rpx};
				width: #{458rpx};
				padding-top: 5rpx;

				.price {
					width: #{458-180rpx};
					height: #{105rpx};
				}

				.app-button {
					font-size: #{26rpx};
					color: #ffffff;
					width: #{180rpx};
					height: #{64rpx};
					line-height: #{64rpx};
					text-align: center;
					/* #ifndef MP-TOUTIAO */
					padding: 0 #{49rpx};
					/* #endif */
					border-radius: #{32rpx};
				}

				.default-button {
					background: linear-gradient(140deg, #ffa360, #ff5c5c);
				}

				.app-now-price {
					font-size: #{30rpx};
					margin-right: #{12rpx};
				}

				.app-old-price {
					font-size: #{25rpx};
					color: #999999;
					text-decoration: line-through;
				}

				.app-symbol:before {
					content: '￥';
					font-size: #{16rpx};
				}
			}
		}
	}

	.member-price {
		margin-top: 5upx;
	}

	.sup-vip {
		margin-top: 5upx;
	}

	// ab拼团
	.pt-shop-item {
		width: 686rpx;
		// padding: 32rpx;
		margin: 32rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.pt-shop-item .item {
		width: 100%;
		height: 100%;
	}

	.pt-title {
		font-size: 32rpx;
		padding: 20rpx 0;
		font-weight: 600;
	}

	.pt-goods {
		display: flex;
		justify-content: space-between;
	}

	.pt-goods-item {
		// width: 296rpx;
		// height: 296rpx;
		width: 324rpx;
		// height: 324rpx;
		// position: relative;
		border-radius: 16rpx;
		overflow: hidden;

		.ptimage {
			width: 324rpx;
			height: 324rpx;
			position: relative;
		}

		.no-goods {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			margin: 0 auto;

			.no-title {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				background-color: rgba($color: #000000, $alpha: 0.5);
				backdrop-filter: blur(9px);
				font-size: 36rpx;
				text-align: center;
				line-height: 124rpx;
				color: #FFFFFF;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.pt-goods-item .image {
		width: 324rpx;
		height: 324rpx;
		/* position: absolute;
		top: 0;
		left: 0; */
	}

	.pt-goods-item .name {
		width: 100%;
		height: 62rpx;
		line-height: 62rpx;
		// text-align: center;
		font-size: 24rpx;
		// background: rgba(0, 0, 0, 0.4);
		// color: #fff;
		/* position: absolute;
		bottom: 0;
		left: 0; */
	}

	.pt-goods-item .price {
		width: 100%;
		height: 52rpx;
		// line-height: 62rpx;
		// text-align: center;
		font-size: 28rpx;
		// background: rgba(0, 0, 0, 0.4);
		// color: #fff;
		/* position: absolute;
		bottom: 0;
		left: 0; */
	}

	.app-button {
		font-size: #{26rpx};
		color: #ffffff;
		width: #{180rpx};
		height: #{64rpx};
		line-height: #{64rpx};
		text-align: center;
		/* #ifndef MP-TOUTIAO */
		padding: 0 #{49rpx};
		/* #endif */
		border-radius: #{32rpx};
	}

	.default-button {
		background: linear-gradient(140deg, #ffa360, #ff5c5c);
	}

	.pt-goods-desc {
		padding: 26rpx 0 0;
		color: #333333;
		font-size: 24rpx;
	}

	// 拼团
	.price {
		/* width: #{458-180rpx};
		height: #{105rpx}; */
		width: 100%;
		height: 52rpx;
		// line-height: 62rpx;
		font-size: 28rpx;
	}

	.app-group {
		font-size: #{22rpx};
		margin-bottom: 5upx;
		margin-top: -3upx;
	}

	.app-now-price {
		font-size: #{30rpx};
		margin-right: #{12rpx};
	}

	.app-old-price {
		font-size: #{25rpx};
		color: #999999;
		text-decoration: line-through;
	}

	.app-origin-price {
		font-size: #{30rpx};
		color: #EB5757;
		margin-right: #{12rpx};
	}

	.app-symbol:before {
		content: '￥';
		font-size: #{30rpx};
	}
</style>
